<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<template>
  <div class="bg-white h100">
    <div style="padding:4rem 0.6rem 0 0.6rem">
      <van-field class="f16" v-model="from.pwd" type="password" clearable placeholder="密码"/>
      <br>
      <br>
      <br>
      <br>
      <van-button
        :loading="isLoginIng"
        loading-text="登录中..."
        class="mt20 b1 round"
        type="info"
        block
        :disabled="loginState"
        @click="submit"
      >{{loginState?"请输入登录密码":"登录"}}</van-button>
    </div>
  </div>
</template>

<script>
import { login } from "@/http/api";
export default {
  data() {
    return {
      from: {
        phone: this.$route.query.phone,
        pwd: null,
        shopId: this.$route.query.shopId,
        shopType: this.$route.query.shopType
      },
      isLoginIng: false, //非加载中状态
      loginState: true //不可点击状态
    };
  },
  watch: {
    from: {
      handler(newName) {
        if (newName.pwd.length) {
          this.loginState = false;
        } else {
          this.loginState = true;
        }
      },
      deep: true
    }
  },
  created() {},
  methods: {
    submit() {
      this.isLoginIng = true;
      this.loginState = true;
      login(this.from).then(res => {
        this.loginState = false;
        this.isLoginIng = false;
        if (res.code === 200) {
          window.localStorage.setItem("token", res.result.token);
          window.localStorage.setItem("token1", res.result.token);
          this.$router.push({
            path: "/"
          });
        }
      });
    }
  }
};
</script>


